<template>
  <div class='container'>
    <el-card shadow="never">
<!-- 头部区域 -->
<!-- 学科名称 -->
<el-form :inline="true" :model="requestParameters" ref="requestParameters" class="head">
 <el-form-item label="标签名称" prop="tagName">
    <el-input    @keyup.enter="handleFilter" placeholder="" style="width: 180px;"   v-model="requestParameters.tagName"></el-input>
     </el-form-item>
<!-- 状态和清除搜索 -->
 <el-form-item label="状态" prop="state">
                  <el-select
                  
                    style="width: 200px;"
                    clearable 
                    v-model="requestParameters.state"
                    @keyup.enter="handleFilter"
                  >
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      
                    ></el-option>
                  </el-select>
                  <el-button size="small"  @click="resetForm" style="margin-left:10px">清除</el-button>
     <el-button type="primary" size="small"  @click="handleFilter">搜索</el-button>
                </el-form-item>

<!-- 新增 -->
<el-form-item class="header-right" >
    <el-button    class="filter-item" size="small" type="success"   @click="handleChange('add')" icon="el-icon-edit" style="margin-left: 10px;">新增标签</el-button>
    </el-form-item>
 </el-form>
<!-- 数据记录 -->
<el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
          style="margin-bottom: 15px;"
        ></el-alert>
<!-- 表格内容 -->
    <el-table
     :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%,margin-top:30px"
         
        >
         <el-table-column align="center" label="序号" type="index" >
          </el-table-column>
          <el-table-column align="center" label="所属学科" class="backColor">
            <template v-slot="{row}">
              <span>{{row.subjectName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="标签名称">
            <template v-slot="{row}">
              <span>{{row.tagName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建者">
            <template v-slot="{row}">
              <span>{{row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期" :sort-method="changesort" sortable>
            <template v-slot="{row}">
              <span>{{row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template v-slot="{row}">
               <span v-if="row.state==1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
            class-name="small-padding fixed-width" 
          >
           <!-- v-slot="{row}" -->
            <template v-slot="{row}">
<el-button type="text" @click="handleStatus(row)">
                <span v-if="row.state==0">启用</span>
                <span v-else>禁用</span>
              </el-button>

<el-button type="text" :disabled="row.state === 1? true:false" @click="handleChange(row.id)" >修改</el-button>
<el-button :disabled="row.state === 1? true:false" type="text" @click="removeSubject(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
<!-- 分页 -->
<div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="pageSizeNum"
              @current-change="CurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              layout=" prev, pager,sizes, next, jumper"
                :page-sizes="[10,20,30, 50]"
            ></el-pagination>
          </div>
        </div>
<!-- 修改弹层 -->
<Dialog ref="editTag" :titleInfo="titleInfo" :formBase="formData" v-on:newDataes="getTagsList"></Dialog>


</el-card>

  </div>
</template>

<script>
import {status} from '@/api/hmmm/constants'
import {list,detail,add,update,remove,changeState} from '../../api/hmmm/tags.js'
import Dialog from './../components/tags-add'
export default {
name:'TagsList',
  components:{
Dialog
  },

data() {
  return {
      tableKey: 0,
      alertText: '',
      dataList:[],
      total:null,
      listLoading:false,
    requestParameters:{
       page:"",
      pagesize:""
    },
    titleInfo: {
        pageTitle: '目录', // 页面标题
        text: '' // 新增、编辑文本
      },
           formData: {
        // id:undefined,
        tagName:'', 
        subjectID:''
       
      },
  }
},
  computed: {
    status () {
      return status
    }
  },
created() {
  this.getTagsList()
  this.initialDate()
},


methods: {
// 初始数据
    initialDate () {
      // 读取数据
      this.getTagsList()
    },
  // 获取列表数据
async getTagsList(){
this.loading = true
const{data:res}= await list(this. requestParameters)
// console.log(counts);
// console.log(res);
// 获取数据给dataList
this.dataList = res.items
// 获取总条数
this.total = res.counts
this.alertText =`共${this.total}条数据`
this.listLoading = false
},
// 数据排序
    changesort (a, b) {
      const oldTime = new Date(a.date).getTime() / 1000
      const newime = new Date(b.date).getTime() / 1000
      if (oldTime - newime > 0) {
        return true
      } else {
        return false
      }
    },
  // 清除
    resetForm () {
      this.$refs.requestParameters.resetFields()
    },
      // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      this.getTagsList(this.requestParameters)
    },
    // 每页显示信息条数
pageSizeNum(val) {
  this.requestParameters.pagesize = val
  if(this.requestParameters.page ===1){
    this.getTagsList(this.requestParameters)
  }
},
// 进入某一页
CurrentChange(val){
  this.requestParameters.page = val
  this.getTagsList()
},
// 添加、编辑之后表单清空
   query () {
      this.formData = {}
    },
  // 新增和修改
handleChange(id){
  this.query()
   this.$refs.editTag.dialogFormV()
if(id === 'add') {
this.titleInfo.text ="新增"  // 给弹层传参
}else{
  this.titleInfo.text ="修改"  // 给弹层传参
  this.hanldeEditForm(id)
}
},
// 编辑，表单详情数据加载
async hanldeEditForm (objeditId){
  this.formData.id = objeditId
  const{data:res} = await detail({id: objeditId})
  // 获取详情给formData
  this.formData =res
  // console.log('objeditId'+res);
  // console.log(res);
  console.log(this.formData);
},
// 删除
removeSubject (subject) {
      this.$confirm('此操作将永久删除该学科 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: subject })
            .then(response => {
              this.$message.success('删除成功')
              // this.dataList.splice(subject, 1)
              this.getTagsList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },

// 点击启用禁用按钮
    async handleStatus (date) {
      // 判断state是什么状态
      if (date.state === 1) {
        this.stateInfo = 0
      } else {
        this.stateInfo = 1
      }
      await changeState({ id: date.id, state: this.stateInfo })
      this.getTagsList()
    },

},
  // // 创建完毕状态
  // created () {
  //   var _this = this
  //   this.initialDate()
  //   this.getTagsList()
  //   // 键盘enter操作
  //   document.onkeydown = function (e) {
  //     var key = window.event.keyCode
  //     if (key === 13) {
  //       _this.handleFilter(this.requestParameters)
  //     }
  //   }
  // }
}
</script>

<style scoped lang='less'>
.head {
  display: flex;
  justify-content: space-between;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
